<template>
  <div id="style21" class="app-container">
      <h1>发布公告</h1>
       <el-form label-width="120px">
         <el-form-item label="标题">
             <el-col :span="8">
            <el-input v-model="notice.title"/>
             </el-col>
         </el-form-item>

         <el-form-item label="公告内容">
             <el-col :span="8">
            <el-input type="textarea" v-model="notice.info"/>
             </el-col>
         </el-form-item>

         <el-form-item>
            <el-button type="primary" @click="saveOrUpdate">保存</el-button>
         </el-form-item>
      </el-form>
  </div>
</template>

<script>
import notice from '@/api/notice'
export default {
  data() {
      return {
         notice:{},//notice对象 
      }
   },
   created() {//页面渲染之前执行
      //获取路由id值
      //调用接口得到医院设置信息
      if(this.$route.params && this.$route.params.id) {
         const id = this.$route.params.id
         this.getNotice(id)
      } else {
         //表单数据清空
         this.notice = {}
      }
   },
   methods: {
      //根据id查询
      getNotice(id) {
         notice.getNotice(id) 
            .then(response => {
               this.notice = response.data
            })
      },
      //添加
      save() {
         notice.saveNotice(this.notice)
            .then(response => {
               //提示
               this.$message({
                  type: 'success',
                  message: '添加成功!'
               })
               //跳转列表页面，使用路由跳转方式实现
               this.$router.push({path:'/notice/list'})
            })
      },
      //修改
      update() {
         notice.updateNotice(this.notice)
            .then(response => {
               //提示
               this.$message({
                  type: 'success',
                  message: '修改成功!'
               })
               //跳转列表页面，使用路由跳转方式实现
               this.$router.push({path:'/notice/list'})
            })
      },
      saveOrUpdate() {
         //判断添加还是修改
         if(!this.notice.id) { //没有id，做添加
            this.save();
         }else {//修改
            this.update()
         }
      }
   }

}
</script>

<style>
#style21{
background:url(../../images/2.jpg);
width:100%; 
height:100%;  
position:absolute;
background-size:100% 100%;}
</style>